<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Menu</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong">
        <p>Menu component is designed to be used as overlay control. It can be very helpful when you need controls on top of the map, images, some text/code editor, etc.</p>
      </div>
      <div class="block-title">Plain Links</div>
      <div class="block block-strong no-padding-horizontal">
        <div class="menu">
          <div class="menu-inner">
            <a href="#" class="menu-item">
              <div class="menu-item-content">Item 1</div>
            </a>
            <a href="#" class="menu-item">
              <div class="menu-item-content">Item 2</div>
            </a>
            <a href="#" class="menu-item icon-only">
              <div class="menu-item-content">
                <i class="f7-icons">pencil</i>
              </div>
            </a>
            <a href="#" class="menu-item icon-only">
              <div class="menu-item-content">
                <i class="f7-icons">square_arrow_up</i>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="block-title">Dropdowns</div>
      <div class="block block-strong no-padding-horizontal" style="z-index: 2000">
        <p class="padding-horizontal">Dropdown can be position on left, center or right of the menu item. It also can be scrollable.</p>
        <div class="menu">
          <div class="menu-inner">
            <div class="menu-item menu-item-dropdown">
              <div class="menu-item-content">Left</div>
              <div class="menu-dropdown menu-dropdown-left">
                <div class="menu-dropdown-content">
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 1</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 2</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 3</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 4</a>
                  <div class="menu-dropdown-divider"></div>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 5</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 6</a>
                </div>
              </div>
            </div>
            <div class="menu-item menu-item-dropdown">
              <div class="menu-item-content">Center</div>
              <div class="menu-dropdown menu-dropdown-center">
                <div class="menu-dropdown-content" style="height: 200px">
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 1</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 2</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 3</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 4</a>
                  <div class="menu-dropdown-divider"></div>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 5</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 6</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 7</a>
                  <div class="menu-dropdown-divider"></div>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 8</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 9</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 10</a>
                </div>
              </div>
            </div>
            <div class="menu-item menu-item-dropdown">
              <div class="menu-item-content">Right</div>
              <div class="menu-dropdown menu-dropdown-right">
                <div class="menu-dropdown-content">
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 1</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 2</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 3</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 4</a>
                  <div class="menu-dropdown-divider"></div>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 5</a>
                  <a href="#" class="menu-dropdown-link menu-close">Menu Item 6</a>
                </div>
              </div>
            </div>
            <div style="margin-left: auto" class="menu-item menu-item-dropdown">
              <div class="menu-item-content icon-only">
                <div class="menu-item-content">
                  <i class="f7-icons">square_arrow_up</i>
                </div>
              </div>
              <div class="menu-dropdown menu-dropdown-right">
                <div class="menu-dropdown-content">
                  <a href="#" class="menu-dropdown-link menu-close">
                    <span>Share on Facebook</span>
                    <i class="f7-icons margin-left">logo_facebook</i>
                  </a>
                  <a href="#" class="menu-dropdown-link menu-close">
                    <span>Share on Twitter</span>
                    <i class="f7-icons margin-left">logo_twitter</i>
                  </a>
                </div>
              </div>
            </div>
            <a href="#" class="menu-item icon-only">
              <div class="menu-item-content">
                <i class="f7-icons">pencil</i>
              </div>
            </a>
          </div>
        </div>
      </div>

      <div class="block-title">On Top Of Map</div>
      <div class="card" style="position: relative">
        <div class="card-content">
          <div class="demo-map-container" style="height: 240px"></div>
          <div class="menu" style="position: absolute; left: 0px; top: 6px">
            <div class="menu-inner">
              <a href="#" class="menu-item">
                <div class="menu-item-content icon-only">
                  <i class="f7-icons">zoom_in</i>
                </div>
              </a>
              <a href="#" class="menu-item">
                <div class="menu-item-content icon-only">
                  <i class="f7-icons">zoom_out</i>
                </div>
              </a>
              <div class="menu-item menu-item-dropdown">
                <div class="menu-item-content icon-only">
                  <i class="f7-icons">layers_fill</i>
                </div>
                <div class="menu-dropdown menu-dropdown-left">
                  <div class="menu-dropdown-content">
                    <a href="#" class="menu-dropdown-link menu-close">Terrain</a>
                    <a href="#" class="menu-dropdown-link menu-close">Satellite</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  return {
    data() {
      return {
        mapStyleLoaded: false,
        mapScriptLoaded: false,
        mapInitialized: false,
      }
    },
    methods: {
      loadMapAssets: function () {
        var self = this;
        var style = document.createElement('link');
        style.rel = 'stylesheet';
        style.href = 'https://unpkg.com/leaflet@1.4.0/dist/leaflet.css';
        style.integrity='sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==';
        style.setAttribute('crossorigin', '')
        style.onload = function () {
          self.mapStyleLoaded = true;
          if (self.mapScriptLoaded) self.initMap();
        }
        document.head.appendChild(style);

        var script = document.createElement('script');
        script.src = 'https://unpkg.com/leaflet@1.4.0/dist/leaflet.js';
        script.integrity='sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==';
        script.setAttribute('crossorigin', '')
        script.onload = function () {
          self.mapScriptLoaded = true;
          if (self.mapStyleLoaded) self.initMap();
        }
        document.head.appendChild(script);
      },
      initMap: function () {
        var self = this;
        var mymap = L.map(self.$el.find('.demo-map-container')[0], { zoomControl: false }).setView([51.505, -0.09], 10);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoibm9saW1pdHM0d2ViIiwiYSI6ImNqcXA4NTdmczBocm8zeG13Zm1zNTdyeDAifQ.HoJgmqQ_uH4zLyNJmiY98A', {
          maxZoom: 18,
          attribution: 'Map data &copy; <a class="external" target="_blank" href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a class="external" target="_blank" href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a class="external" target="_blank" href="https://www.mapbox.com/">Mapbox</a>',
          id: 'mapbox.streets'
        }).addTo(mymap);
        self.mapInitialized = true;
      },
    },
    on: {
      pageAfterIn: function () {
        var self = this;
        if (self.mapInitialized) return;
        if (!window.L) {
          self.loadMapAssets();
          return;
        }
        self.initMap();
      },
    },
  }
</script>